<template>
  <div>
    <h1>病人信息</h1>
    <div class="section">
      <h2>基本信息</h2>
      <table>
        <tr>
          <th>就诊卡号</th>
          <td>{{ patientinfo.cardId }}</td>
          <th>姓名</th>
          <td>{{ patientinfo.patientName }}</td>
        </tr>
        <tr>
          <th>身份证号</th>
          <td>{{ patientinfo.number }}</td>
          <th>性别</th>
          <td>
            <dict-tag :options="sys_user_sex" :value="patientinfo.patientSex"/>
          </td>
        </tr>
        <tr>
          <th>年龄</th>
          <td>{{ patientinfo.age }}</td>
          <th>电话</th>
          <td>{{ patientinfo.phone }}</td>
        </tr>
        <tr>
          <th>出生日期</th>
          <td>{{ patientinfo.birthDate }}</td>
          <th>联系人</th>
          <td>{{ patientinfo.familyName }}</td>
        </tr>
        <tr>
          <th>联系人电话</th>
          <td>{{ patientinfo.familyPhone }}</td>
          <th>住址</th>
          <td>{{ patientinfo.address }}</td>
        </tr>
      </table>
    </div>
    <div class="section">
      <h2>健康信息</h2>
      <table>
        <tr>
          <th>是否有过敏史</th>
          <td>{{ patientinfo.hasAllergy ? "是" : "否" }}</td>
          <th>过敏物名称</th>
          <td>{{ patientinfo.allergyName }}</td>
        </tr>
        <tr>
          <th>身高</th>
          <td>{{ patientinfo.height }}cm</td>
          <th>体重</th>
          <td>{{ patientinfo.weight }}kg</td>
        </tr>
      </table>
    </div>
    <div class="section">
      <h2>历次就诊信息</h2>
      <table>
        <tr>
          <th>历次就诊日期</th>
          <th>历次就诊诊断</th>
        </tr>
        <tr v-for="visit in visitinfo" :key="visit.date">
          <td>{{ formatDate(visit.value) }}</td>
          <td>{{ visit.label }}</td>
        </tr>
      </table>
    </div>
    <div class="save-button-container">
      <el-button type="primary" @click="savepatientinfo">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getPatientinfo , getMedicalVisits} from "@/api/patientinfo/patientinfo";
const { proxy } = getCurrentInstance();
const { sys_user_sex } = proxy.useDict('sys_user_sex');

const props = defineProps({
  patientId: String, // 接收父组件传递的 patientId
});

const patientinfo = ref({});
const loading = ref(true);
const visitinfo = ref({});

/** 格式化日期 */
function formatDate(dateString) {
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
/** 查询病人详细信息 */
async function getList(patientId) {
  if (!patientId) {
    console.error("patientId is required");
    return;
  }
  try {
    loading.value = true;
    const response = await getPatientinfo(patientId);
    patientinfo.value = response.data || {}; // 假设接口返回的数据是 response.data
    loading.value = false;
    await getVisits(patientinfo.value.cardId); // 获取历次就诊信息
  } catch (error) {
    console.error("Failed to fetch patient info:", error);
    loading.value = false;
  }
}

/** 查询历次就诊信息 */
async function getVisits(cardId) {
  if (!cardId) {
    console.error("cardId is required");
    return;
  }
  try {
    loading.value = true;
    const response = await getMedicalVisits(cardId);
    console.log("getVisits response:", response);
    const visits = response.rows || [];
    visitinfo.value = visits.map((item)=>({
      value: item.createdate,
      label: item.maindiagnosis,
    }))
    loading.value = false;
  } catch (error) {
    console.error("Failed to fetch medical visits:", error);
    loading.value = false;
  }
}



watch(
  () => props.patientId,
  async (newId) => {
    if (newId) {
      await getList(newId);
    }
  },
  { immediate: true } // 立即执行一次
);

// 在组件加载时调用
onMounted(() => {
  if (props.patientId) {
    getList(props.patientId);
  }
});
</script>

<style scoped>
body {
  font-family: "Microsoft YaHei", Arial, sans - serif;
  margin: 20px;
  font-size: 16px;
  color: #333; /* 深灰色，更易阅读 */
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}
h2 {
  font-size: 18px;
  color: #333;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box; /* 确保边框和内边距包含在宽度计算内 */
  width: 50%; /* 使每一行的两个单元格宽度一样，各占50% */
}

th {
  background-color: #f2f2f2;
  text-align: center;
  width: 120px; /* 可根据实际需求调整宽度 */
}

.section {
  margin-bottom: 20px;
}

.save-button-container {
  text-align: center;
}
</style>
